<template>
<div style="width:100%">
      <!-- 卡片视图 -->
    <el-card class="box-card">
      <div>
      <el-form :inline="true">
        <el-form-item><el-input placeholder="请输入教材名" v-model="keyword"></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      </div>
        <div>
        <el-form :inline="true">
            <el-form-item>
            <el-button class="el-icon-plus" @click="handleAdd()">新增</el-button>
            </el-form-item>
        </el-form>
        </div>
    </el-card>
    <!-- 教材信息列表 -->
    <el-card>
        <el-table :data="tbData" style="width: 100%" v-loading="loading">
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column label="教材名" align="center" property="materialName" width="240px">
            </el-table-column>
            <el-table-column label="价格" align="center" property="price" width="240px"></el-table-column>
            <el-table-column label="出版社" align="center" property="press" width="240px"></el-table-column>
            <el-table-column label="联系电话" align="center" property="contactNumber" width="240px"></el-table-column>
                <!-- 弹出框 -->
            <el-table-column label="操作"  align="center" fixed="right" width="240px">
            <template slot-scope="scope">
                <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
  </el-table>
    <!-- 模态框 -->
      <div>
        <el-dialog title="新增教材" :visible.sync="dialogFormVisible" >
          <el-form :model="form" :rules="rules" ref="formDemo" label-width="100px">
            <el-form-item label="教材名" prop="materialName">
               <el-input v-model="form.materialName" controls-position="right"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="price">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出版社" prop="press">
              <el-input v-model="form.press" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="联系电话" prop="contactNumber">
               <el-input v-model="form.contactNumber" controls-position="right"></el-input>
            </el-form-item>
          </el-form>    
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
          </div>
        </el-dialog>
      </div>
  </el-card>
  
        <div class="block">
        <el-pagination
            :current-page="pager.pageIndex"
            :page-size="pager.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pager.rowsTotal"
            background
        >
        </el-pagination>
        </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
     // 1. 验证手机号的验证规则
    var checkMobile = (rule, value, callback) => {
      // 前两位以13、15、18、17开头 后八位0-9
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (reg.test(value)) {
        // 验证通过
        return callback();
      }
      else{
        // 验证不通过
        callback(new Error("手机号不正确"));
      }
    };
    return {
        pager:{
        pageIndex:1,  //当前页面
        pageSize:6,   //每页展示列表数
        rowsTotal:20  // 列表总数
      },
        rules:{
        materialName:[
            { required: true, trigger: "blur",  message: "请输入教材名"},
        ],
        price:[
            { required: true, trigger: "blur", message: "请输入价格"},
        ],
        press:[
            { required: true, trigger: "blur", message: "请输入出版社"},
        ],
        contactNumber:[
            { required:true, trigger:"blur", message:'请输入联系电话'},
            { validator:checkMobile, trigger:"blur"}
        ],
      },
        keyword:"",
        loading: false,
        tbData: [],
        dialogFormVisible: false,
        form: {
            id:"",
            materialName: "",
            price:"",
            press:"",
            contactNumber:"",
      },
    };
  },
  methods: {
    // 搜索
     handleQuery(){},
    //  刷新
     handleRefresh(){},
    //  新增
     handleAdd() {
        this.dialogFormVisible = true;
    },
    // 编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
        // 编辑时获取当前表数组中的下标
        this.currentEditIndex = index;
    },
    // 删除教材
    handleDelete(index, row) {},
    // 取消
    handleCancel(){
        this.dialogFormVisible =false
    },
    // 保存
    handleSave(){},
  },
};
</script>
<style>
.el-card__body {
  display: flex;
  justify-content: space-between;
}
.el-table th.el-table__cell > .cell {
  padding-left: 14px !important;
}
.slh {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main1 {
  width: 100%;
  height: 100%;
}
</style> 